<template>
  <div class="row-item flex-container">
      <div class="title"> {{title}}<span v-if="!!title">:</span></div>
      <div class="input">
        <div class="des">
          <input 
            type="text"
            :autofocus="autofocus"
            :maxlength="maxlength"
            :placeholder="placeholder"
            @blur="onBlur"
            @change="onChange"
            @focus="onFocus"
            @input="onInput"
            v-model="model"
            class="process-input"
          />
        </div>
        <div class="error"></div>
      </div>
    </div>
</template>

<script>
export default {
    name:'process-input',
    data(){
        return{
            model:this.value,
            isFocus:false
        }
    },
    props:{
        title:{},
        value:{},
        placeholder:{

        },
        maxlength:{
            type:Number
        },
        readonly:{
            default:false,
            type:Boolean
        },
        autofocus:{
            default:false
        }
    },
    watch:{
        value:function(val,oldVal){
            if(!!val){
                this.model = val.trim()
                if(this.model && this.maxlength && (this.model+'').length > this.maxlength){
                    this.model = oldVal
                }
                if(this.model){
                    this.onInput() 
                }
            }
        }
    },
    methods:{
        onInput(){
            this.$emit('input',this.model)
        },
        onFocus(){
            this.isFocus = true
        },
        onChange(){
            this.onInput()
        },
        onBlur(){

        }
    }
};
</script>

<style scoped lang="less">
    .flex-container{
        display: flex;
        justify-content: space-between;
    }
    .process-input{
        width: 412px;
        border: none;
        height: 34px;
        outline: none;
        padding: 0 10px;
        box-sizing: border-box;
        background: #F8E9C9;
    }
    .row-item{
        align-items: center;
        width: 614px;
        .title{
            width: 200px;
            text-align: right;
            font-size: 20px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #474747;
            padding-right: 20px;
            box-sizing: border-box;
        }
        .input{
            width: 414px;
            outline: none;
            .des{
                border: 1px solid #333333;
                height: 34px;
                border-radius: 4px;
                overflow: hidden;
            }
        }
    }
    
</style>